.container {
  display: flex;
  flex-wrap: wrap;
}
.error {
  border-color: #ff4d4f !important;
}
.item {
  margin: 0 8px 8px 0;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  padding: 8px;
  width: 104px;
  height: 104px;

  .info {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    &::before {
      content: " ";
      position: absolute;
      z-index: 1;
      background-color: rgba(0, 0, 0, .5);
      -webkit-transition: all .3s;
      transition: all .3s;
      width: 100%;
      height: 100%;
      opacity: 0;
    }

    img {
      width: 100%;
      border: 1px solid #f2f2f2;
      transition: all .3s;
    }

    .btn-wrap {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 10;
      white-space: nowrap;
      -webkit-transition: all .3s;
      transition: all .3s;
      opacity: 0;

      a {
        color: #eee;
        margin: 0 4px;

        &:hover {
          color: #fff;
        }
      }
    }

    &:hover {
      &::before {
        opacity: 1;
      }

      .btn-wrap {
        opacity: 1;
      }
    }
  }
}

.upload {
  margin: 0 8px 8px 0;
  border: 1px dotted;
  width: 104px;
  height: 104px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  cursor: pointer;
}
.wrap {
  .urlInput {
    display: flex;
    align-items: center;
  }
}
